<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
            Latisoft Móvil
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" href="<?php echo base_url(); ?>media/jqueryMobile/css/my.css" />
        <script language="javascript" src="<?php echo base_url(); ?>application/views/movil/js/movil.js"></script>
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
        </script>
        <script src="<?php echo base_url(); ?>media/jqueryMobile/js/my.js">
        </script>
    </head>
    <body onchangepage="alert('CHANGE PAGE');">
        <!-- Home -->
        <div data-role="page" id="home">
            <div data-theme="b" data-role="header">
                <h3>
                    Latisoft Móvil
                </h3>
                <h2>
                    Bienvenido <?php echo $nombre; ?>
                </h2>
            </div>

            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Citas
                    </li>
                    <li data-theme="c">
                        <a href="#verPendientes" data-inline="true" data-transition="slide">
                            Ver Pendientes
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#reservar" data-transition="slide">
                            Reservar
                        </a>
                    </li>
                </ul>
                <ul data-role="listview" data-divider-theme="b" data-inset="true" data-transition="slide">
                    <li data-role="list-divider" role="heading">
                        Historial Médico
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            Ver
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Analizar si esto es comun para todas las vistas-->
            <div id="cerrar" data-role="content" style="float: right">
                <input type="submit" data-inline="true" data-theme="b" value="Cerrar Sesión" data-mini="true" onclick="logout()"/>
            </div>
        </div>



        <?php
            $this->load->view('movil/ver_pendientes.php');
            $this->load->view('movil/reservar');
        ?>

        <script>
            //App custom javascript
        </script>
    </body>
</html>